<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Tegola: MVT Tile Server</title>
		<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
		<style>
			body { margin:0; padding:0; }
			#map { position:absolute; top:0; bottom:0; width:100%; }
		</style>
		<link href='lib/mapbox-gl-js/v0.41.0/mapbox-gl.css' rel='stylesheet' />
		<link href='css/tegola.css' rel='stylesheet' />
	</head>
	<body>
		<div id="app" v-cloak>
			<div id="main">
				<div id="left-nav">
					<div id="left-nav-header">
						<h1>Tegola ({{capabilities.version}})</h1>
						<h2 v-on:click="toggleMapsVisibility">Maps</h2>
					</div>
					<div class="container">
						<ul id="maps" v-bind:class="{'hide': hideMapsList}">
							<li v-for="map in maps" v-on:click.self="loadMap(map.name)"><span>{{map.name}}</span>
								<ul class="map-layers">
									<li v-for="layer in map.layers" v-on:click.self="toggleLayerVisibility(layer.name)">
										<span class="layer-color" v-bind:style="{'background-color': layer.color, 'visibility': layer.visibility}">&nbsp;</span>{{layer.name}}
									</li>
								</ul>
							</li>
						</ul>
					</div>
					<div id="left-nav-footer">
						<div v-on:click="toggleFeatureInspector" class="btn" v-bind:class="{active: inspectorIsActive}" id="toggle-feature-inspector">
							<span class="dot"></span>Inspect Features
						</div>
					</div>
				</div>
				<div id='map'></div>
			</div>
		</div>
	</body>
	<script src='lib/mapbox-gl-js/v0.41.0/mapbox-gl.js'></script>
	<script src='lib/vue/v2.3.0/vue.min.js'></script>
	<!-- uncomment for dev -->
	<!--script src='https://unpkg.com/vue@2.4.1'></script-->
	<script src='js/tegola.js'></script>
</html>